<template>
    {{ '名字:' + a.name }}<br/>
    {{ '年龄:' + a.age }}
    <hr/>
    {{ '名字:' + obj1.name }}<br/>
    {{ '年龄:' + obj1.age }}<br/>
    {{ '性别:' + obj1.sex }}
    <hr/>
    {{ arr[0] }}
</template>
<script setup>
import { ref, reactive } from 'vue';
    const a = ref('1')
    const obj1 = reactive({
        name: '李四',
        age: 21
    })
    // reactive定义响应式数组
    const arr = reactive(['a', 'b', 'c'])
    setTimeout(() => {
        a.value = {name: '张三', age: 20}
        console.log(a.value)
        // reactive定义的响应式对象，只能修改其属性
        // 作用是为了保持对象结构不变
        obj1.name = '周杰伦'
        // 为obj1增加一个属性
        obj1.sex = '男'
    }, 2000)
</script>
<style scoped>
    
</style>